<%@ page import="com.next.Vehicle; com.next.ContactBankAccount" %>
<div class="row">
    <div class="hpanel hyellow">
        <div class="panel-heading">
            <div class="panel-tools">
                <a class="showhide"><i class="fa fa-chevron-up"></i></a>
            </div>
            信用卡产品信息
        </div>
        <g:set var="bankAccount"
               value="${com.next.ContactBankAccount.findByContact(this?.opportunity?.contact)?.bankAccount}"/>
        <div class="panel-body form-horizontal">
            <input type="hidden" name="bankAccount.id" value="${bankAccount?.id}">

            <div class="form-group">
                <label class="col-md-2 control-label">信用卡卡号</label>

                <div class="col-md-3 input-group">
                    <input class="weui-input hide" name="bankAccount.type"
                           value="${com.next.BankAccountType.findByName('信用卡')?.id}"/>
                    <input class="form-control" type="number" value="${bankAccount?.numberOfAccount}"
                           name="bankAccount.numberOfAccount" id="numberOfAccount" placeholder="请输入"/>
                </div>
                <div id="isFaKa" style="display: none">
                    <label class="col-md-2 control-label">是否实时发卡</label>

                    <div class="col-md-3 input-group">
                        <g:select class="form-control" value="${bankAccount?.isIssuingCardImmediately}"
                                  name="bankAccount.isIssuingCardImmediately" id="isIssuingCardImmediately"
                                  from="${[[name: '是', value: true], [name: '否', value: false]]}" optionKey="value"
                                  optionValue="name" noSelection="${['': '请选择']}"/>
                    </div>
                </div>
            </div>
            <div class="hide" id="bankAccountInfo">
                <div class="form-group">

                    <label class="col-md-2 control-label">账单卡片寄送地址类型</label>

                    <div class="col-md-3 input-group">
                        <g:select class="form-control" name="bankAccount.postAddressType" id="postAddressType"
                                  from="${com.next.BankAccount.constrainedProperties.postAddressType.inList}"
                                  noSelection="${['': '请选择']}" value="${bankAccount?.postAddressType}"></g:select>
                    </div>

                    <label class="col-md-2 control-label">账单卡片寄送地址</label>

                    <div class="col-md-3 input-group">
                        <g:textField class="form-control" name="bankAccount.postAddress"
                                     value="${bankAccount?.postAddress}" id="postAddress" placeholder="请输入"
                                     readonly="true"/>
                    </div>

                </div>

                <div class="form-group">
                    <label class="col-md-2 control-label">对账单发送方式</label>

                    <div class="col-md-3 interestPaymentMethod">
                        <g:select class="form-control" id="billSentMethod" name="bankAccount.billSentMethod"
                                  value="${bankAccount?.billSentMethod}"
                                  from="${com.next.BankAccount.constrainedProperties.billSentMethod.inList}"
                                  noSelection="${['': '请选择']}"></g:select>
                    </div>
                    <div id="emailDiv">
                        <label class="col-md-2 control-label">E-mail</label>

                        <div class="col-md-3 input-group">
                            <g:textField class="form-control" name="bankAccount.billSentEmail" id="billSentEmail" placeholder="请输入"/>
                        </div>
                    </div>


                </div>


                <div class="form-group">
                    <label class="col-md-2 control-label">住宅性质</label>

                    <div class="col-md-3 input-group">
                        <g:select class="form-control" id="houseProperty" name="bankAccount.houseProperty"
                                  from="${['亲属产权', '单位宿舍', '无按揭自置', '按揭自置', '租用']}" value="${bankAccount?.houseProperty}"
                                  noSelection="${['': '请选择']}"/>
                    </div>
                    <label class="col-md-2 control-label">还款方式</label>

                    <div class="col-md-3 input-group">
                        <g:select class="form-control" id="creditCardPaymentMethod"
                                  value="${bankAccount?.creditCardPaymentMethod}"
                                  name="bankAccount.creditCardPaymentMethod"
                                  from="${com.next.BankAccount.constrainedProperties.creditCardPaymentMethod.inList}"
                                  noSelection="${['': '请选择']}"></g:select>
                    </div>


                </div>

                <div class="form-group hide" id="provinceDiv">
                    <label class="col-md-2 control-label">开户行所在省市</label>

                    <div class="col-md-3 input-group">
                        <g:select class="form-control" name="bankAccount.province"
                                  id="province" optionKey="id" optionValue="name" value="${bankAccount?.province?.id}"
                                  from="${com.next.Province.list()}" noSelection="${['': '请选择']}"></g:select>
                    </div>
                    <label class="col-md-2 control-label">人民币账号</label>

                    <div class="col-md-3">
                        <input class="weui-input hide" name="bankAccount1.type"
                               value="${com.next.BankAccountType.findByName('借记卡')?.id}"/>
                        <g:textField class="form-control" value="${bankAccount?.numberOfAccount}"
                                     name="bankAccount1.numberOfAccount" placeholder="请输入"/>
                    </div>

                </div>

                <div class="form-group">
                    <label class="col-md-2 control-label">还款账户选择：</label>

                    <div class="col-md-3 input-group">
                        <g:select class="form-control" id="creditCardPaymentAccount"
                                  name="bankAccount.creditCardPaymentAccount"
                                  value="${bankAccount?.creditCardPaymentAccount}"
                                  from="${com.next.BankAccount.constrainedProperties.creditCardPaymentAccount.inList}"
                                  noSelection="${['': '请选择']}"></g:select>

                    </div>
                    <label class="col-md-2 control-label">优先级</label>

                    <div class="col-md-3">
                        <g:textField class="form-control" id="priority" value="${bankAccount?.priority}"
                                     name="bankAccount.priority" placeholder="请输入"/>
                    </div>

                </div>

                <div class="form-group">
                    <label class="col-md-2 control-label">卡面名称：</label>

                    <div class="col-md-3 input-group">
                        <g:select class="form-control" name="bankAccount.name" id="name" value="${bankAccount?.name}"
                                  from="${['长城环球通爱驾汽车信用卡', '长城环球通爱家信用卡', '易分享自动分期白金信用卡']}"
                                  noSelection="${['': '请选择']}"/>
                    </div>
                    <label class="col-md-2 control-label">卡面代码</label>

                    <div class="col-md-3">
                        <g:textField class="form-control" name="bankAccount.code" value="${bankAccount?.code}"
                                     id="code" placeholder="请输入" readonly="true"/>
                    </div>

                </div>

                <div class="form-group">
                    <label class="col-md-2 control-label">是否申请循环额度：</label>

                    <div class="col-md-3 input-group">
                        <g:select class="form-control" name="bankAccount.circulationQuota" id="circulationQuota"
                                  value="${bankAccount?.circulationQuota}"
                                  from="${[[name: '申请循环额度', value: true], [name: '申请零额度', value: false]]}" optionKey="value"
                                  optionValue="name" noSelection="${['': '请选择']}"/>
                    </div>
                    <label class="col-md-2 control-label">BH（分行网点号）</label>

                    <div class="col-md-3">
                        <g:textField class="form-control" id="branchCode" value="${bankAccount?.branchCode}"
                                     name="bankAccount.branchCode" placeholder="请输入"/>
                    </div>

                </div>

                <div class="form-group">
                    <label class="col-md-2 control-label">IN（营销人员代码）：</label>

                    <div class="col-md-3 input-group">
                        <g:textField class="form-control" id="marketerCode" value="${bankAccount?.marketerCode}"
                                     name="bankAccount.marketerCode" placeholder="请输入"/>
                    </div>
                    <label class="col-md-2 control-label">免年费类型类别</label>

                    <div class="col-md-3">
                        <g:select class="form-control" id="noAnnualFeeType" value="${bankAccount?.noAnnualFeeType}"
                                  name="bankAccount.noAnnualFeeType"
                                  from="${com.next.BankAccount.constrainedProperties.noAnnualFeeType.inList}"
                                  noSelection="${['': '请选择']}"></g:select>
                    </div>

                </div>

                <div class="form-group">
                    <label class="col-md-2 control-label">申请信用卡类别</label>

                    <div class="col-md-3 input-group">
                        <g:select class="form-control" name="bankAccount.subType" id="subType" optionKey="id"
                                  value="${bankAccount?.subType?.id}"
                                  optionValue="name" from="${com.next.BankAccountSubType.list()}"
                                  noSelection="${['': '请选择']}"/>
                    </div>
                    <label class="col-md-2 control-label">是否有增额意愿</label>

                    <div class="col-md-3">
                        <g:select class="form-control" name="bankAccount.wannaToIncreaseQuota" id="wannaToIncreaseQuota"
                                  from="${[[name: '有', value: true], [name: '没有', value: false]]}" optionKey="value"
                                  value="${bankAccount?.wannaToIncreaseQuota}"
                                  optionValue="name" noSelection="${['': '请选择']}"/>
                    </div>

                </div>

                <div class="form-group">
                    <label class="col-md-2 control-label">联系人是否是客户经理</label>

                    <div class="col-md-3 input-group">
                        <g:select class="form-control" name="bankAccount.connectmanIsClientManager"
                                  id="connectmanIsClientManager"
                                  from="${[[name: '是', value: true], [name: '否', value: false]]}" optionKey="value"
                                  value="${bankAccount?.connectmanIsClientManager}"
                                  optionValue="name" noSelection="${['': '请选择']}"/>
                    </div>
                    <label class="col-md-2 control-label">还款金额选择</label>

                    <div class="col-md-3">
                        <g:select class="form-control" id="creditCardPaymentType" name="bankAccount.creditCardPaymentType"
                                  value="${bankAccount?.creditCardPaymentType}"
                                  from="${com.next.BankAccount.constrainedProperties.creditCardPaymentType.inList}"
                                  noSelection="${['': '请选择']}"></g:select>
                    </div>

                </div>

                <div class="form-group">
                    <label class="col-md-2 control-label">刷卡消费方式选择</label>

                    <div class="col-md-3 input-group">
                        <g:select class="form-control" id="creditCardPayMethod" name="bankAccount.creditCardPayMethod"
                                  value="${bankAccount?.creditCardPayMethod}"
                                  from="${com.next.BankAccount.constrainedProperties.creditCardPayMethod.inList}"
                                  noSelection="${['': '请选择']}"></g:select>
                    </div>
                    <label class="col-md-2 control-label">母亲姓氏</label>

                    <div class="col-md-3">
                        <g:textField class="form-control" id="surnameOfMother" value="${bankAccount?.surnameOfMother}"
                                     name="bankAccount.surnameOfMother" placeholder="请输入"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="hpanel hyellow">
        <div class="panel-heading">
            <div class="panel-tools">
                <a class="showhide"><i class="fa fa-chevron-up"></i></a>
            </div>
            申请分期类型
        </div>

        <div class="panel-body form-horizontal">
            <div class="form-group">
                <label class="col-md-2 control-label">分期类型</label>

                <div class="col-md-3 input-group">
                    <g:select class="form-control" name="subtype" id="subtype" value="${this.opportunity?.subtype?.id}"
                              optionKey="id"
                              optionValue="name" from="${com.next.OpportunitySubtype.list()}"
                              noSelection="${['': '请选择']}"/>
                </div>

                <label class="col-md-2 control-label">本金还款方式</label>

                <div class="col-md-3 input-group">
                    <g:select class="form-control" name="principalPaymentMethod" id="principalPaymentMethod"
                              value="${this.opportunity?.principalPaymentMethod?.id}" optionKey="id"
                              optionValue="name" from="${com.next.PrincipalPaymentMethod.list()}"
                              noSelection="${['': '请选择']}"/>
                </div>

            </div>

            <div class="form-group">
                <label class="col-md-2 control-label">分期额度</label>

                <div class="col-md-3 input-group">
                    <input class="form-control" type="number" name="requestedAmount" id="requestedAmount"
                           value="${this?.opportunity?.requestedAmount ?: ''}" placeholder="请输入"/>
                </div>

                <label class="col-md-2 control-label">手续费分期</label>

                <div class="col-md-3 input-group">
                    <g:select class="form-control" name="commissionPaymentMethod" id="commissionPaymentMethod"
                              value="${this.opportunity?.commissionPaymentMethod?.id}" optionKey="id"
                              optionValue="name" from="${com.next.CommissionPaymentMethod.list()}"
                              noSelection="${['': '请选择']}"/>
                </div>

            </div>

            <div class="form-group">
                <label class="col-md-2 control-label">还款周期</label>

                <div class="col-md-3 interestPaymentMethod">
                    <g:select class="form-control" id="repaymentPeriod" name="repaymentPeriod"
                              from="${com.next.Opportunity.constrainedProperties.repaymentPeriod.inList}"
                              value="${this?.opportunity?.repaymentPeriod}" noSelection="${['': '请选择']}"></g:select>
                </div>
                <label class="col-md-2 control-label">分期期数</label>

                <div class="col-md-3 input-group">
                    <g:select class="form-control" id="loanDuration" name="loanDuration"
                              from="[6, 12, 24, 36, 48, 60, 96]" value="${this?.opportunity?.loanDuration}"
                              noSelection="${['': '请选择']}"/>
                </div>

            </div>


            <div class="form-group">
                <label class="col-md-2 control-label">客户费率</label>

                <div class="col-md-3 input-group">
                    <input class="form-control" type="number" name="commissionRateTemp" id="commissionRateTemp"
                           value="${this?.opportunity?.commissionRate * 100 ?: ''}" placeholder="请输入"/>
                    <span class="input-group-addon">%</span>
                </div>
                <label class="col-md-2 control-label">手续费</label>

                <div class="col-md-3 input-group">
                    <input class="form-control" type="number" name="commission" id="commission"
                           value="${this?.opportunity?.commission ?: ''}" placeholder="请输入" readonly="true"/>
                    <span class="input-group-addon">元</span>
                </div>

            </div>

            <div class="form-group">
                <label class="col-md-2 control-label">支付方式</label>

                <div class="col-md-3">
                    <g:select class="form-control" name="paymentMode" id="paymentMode" from="['受托支付', '自主支付']"
                              value="${this?.opportunity?.paymentMode}" noSelection="${['': '请选择']}"/>
                </div>
                <label class="col-md-2 control-label">担保类型</label>

                <div class="col-md-3 input-group">
                    <g:select class="form-control" name="guaranteeType" id="guaranteeType"
                              value="${this.opportunity?.guaranteeType?.id}" optionKey="id"
                              optionValue="name" from="${com.next.GuaranteeType.list()}"
                              noSelection="${['': '请选择']}"/>

                </div>
            </div>

            <div class="form-group">
                <label class="col-md-2 control-label">担保品修改标识</label>

                <div class="col-md-3">
                    <g:select class="form-control" id="collateralIsModified" name="collateralIsModified"
                              from="['是', '否', '无']" value="${this?.opportunity?.collateralIsModified}"
                              noSelection="${['': '请选择']}"/>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="hpanel hyellow">
        <div class="panel-heading">
            <div class="panel-tools">
                <a class="showhide"><i class="fa fa-chevron-up"></i></a>
            </div>
            交易信息
        </div>

        <div class="panel-body form-horizontal">
            <div class="form-group">
                <label class="col-md-2 control-label">省份</label>

                <div class="col-md-3 input-group">
                    <g:textField class="form-control" name="province" id="province" placeholder="请输入" value="${this?.opportunity?.user?.account?.province?.name}" readonly="true"/>
                </div>

                <label class="col-md-2 control-label">城市</label>

                <div class="col-md-3 input-group">
                    <g:textField class="form-control" name="city" id="city" placeholder="请输入" value="${this?.opportunity?.user?.account?.city?.name}" readonly="true"/>
                </div>

            </div>

            <div class="form-group">
                <label class="col-md-2 control-label">品牌</label>

                <div class="col-md-3 input-group">
                    <g:textField class="form-control" name="brand" id="brand" placeholder="请输入" value="${this?.opportunity?.brand}" readonly="true"/>
                </div>
                <label class="col-md-2 control-label">资金需求金额</label>

                <div class="col-md-3 input-group">
                    <input class="form-control" type="number" name="requestedAmount1" id="requestedAmount1" value="${this?.opportunity?.requestedAmount}" placeholder="请输入" readonly="true"/>
                    <span class="input-group-addon">元</span>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-2 control-label">账户名称</label>

                <div class="col-md-3">
                    <input class="form-control" name="bankAccount3.name"
                           placeholder="请输入"/>
                </div>
                <label class="col-md-2 control-label">账号</label>

                <div class="col-md-3 input-group">
                    <input class="weui-input hide" name="bankAccount3.type" value="${com.next.BankAccountType.findByName('借记卡')?.id}" />
                    <input class="form-control" name="bankAccount3.numberOfAccount"
                           placeholder="请输入" />
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-2 control-label">开户行</label>

                <div class="col-md-3">
                    <g:select class="form-control" name="bankAccount3.bank" optionKey="id"
                              optionValue="name" from="${com.next.Bank.list()}" noSelection="${['': '请选择']}"/>

                </div>
                <label class="col-md-2 control-label">账户类别</label>

                <div class="col-md-3 input-group">
                    <g:select class="form-control" name="bankAccount3.accountType"
                              from="${com.next.BankAccount.constrainedProperties.accountType.inList}" noSelection="${['': '请选择']}"></g:select>

                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function ()
    {
        $("#billSentMethod").change(function () {
            var billSentMethod = $(this).val().trim();
            if (billSentMethod == "E-mail")
            {
                $('#emailDiv').removeClass("hide");
            }
            else
            {
                $('#emailDiv').addClass("hide");
            }
        });

        $("#numberOfAccount").blur(function()
        {
            var numberOfAccount = $("#numberOfAccount").val();
            if (numberOfAccount && numberOfAccount == 0)
            {
                $('#bankAccountInfo').removeClass("hide");
            }
            else
            {
                $('#bankAccountInfo').addClass("hide");
            }
        })

        $("#isIssuingCardImmediately").change(function () {
            var isIssuingCardImmediately = $(this).val().trim();
            if (isIssuingCardImmediately == "true")
            {
                $('#bankAccountInfo1').removeClass("hide");
            }
            else
            {
                $('#bankAccountInfo1').addClass("hide");
            }
        });

        $("#creditCardPaymentMethod").change(function () {
            var modeRepayment = $(this).val().trim();
            if (modeRepayment == "自动还款") {
                $('#provinceDiv').removeClass("hide");
            } else {
                $('#provinceDiv').addClass("hide");
            }
        });

        $("#purchaseSite").change(function () {
            var purchaseSite = $(this).val().trim();
            if (purchaseSite == "进口") {
                $('#importOddNumberDiv').removeClass("hide");
            } else {
                $('#importOddNumberDiv').addClass("hide");
            }
        });

        $("#postAddressType").change(function () {
            var postAddress
            var postAddressType = $("#postAddressType").val();
            if (postAddressType == '住宅地址') {
                postAddress = '${this?.opportunity?.contact?.residentialAddress}'
            }
            if (postAddressType == '单位地址') {
                postAddress = '${this?.opportunity?.contact?.companyAddress}'
            }
            $("#postAddress").val(postAddress);
        });
        $("#maximumAmountOfCredit").blur(function () {
            var monthlyInterestTemp = $("#monthlyInterestTemp").val();
            var maximumAmountOfCredit = $("#maximumAmountOfCredit").val();
            if (maximumAmountOfCredit && monthlyInterestTemp) {
                $("#commission").val(maximumAmountOfCredit * monthlyInterestTemp / 100);
            }
        });
        $("#monthlyInterestTemp").blur(function () {
            var monthlyInterestTemp = $("#monthlyInterestTemp").val();
            var maximumAmountOfCredit = $("#maximumAmountOfCredit").val();
            if (maximumAmountOfCredit && monthlyInterestTemp) {
                $("#commission").val(maximumAmountOfCredit * monthlyInterestTemp / 100);
            }
        });

        $("#name").change(function () {
            var name = $("#name").val();
            if (name == '长城环球通爱驾汽车信用卡') {
                $('#code').val('6193');
            }
            if (name == '长城环球通爱家信用卡') {
                $('#code').val('6231');
            }
            if (name == '易分享自动分期白金信用卡') {
                $('#code').val('0113');
            }
        });

        $(".tab-info .title").click(function () {
            $(this).toggleClass('active').next(".weui-cells").fadeToggle(300);
        });

        $("#submit").click(function () {

            // var postAddress = $("#postAddress").val();
            // if (!postAddress) {
            //     helpMessage("账单卡片寄送地址");
            //     return;
            // }

            var numberOfAccount = $("#numberOfAccount").val();
            if (!numberOfAccount) {
                helpMessage("请输入卡面代码");
                return;
            }

            // var name = $("#name").val();
            // if (!name) {
            //     helpMessage("请输入卡面简称");
            //     return;
            // }

            var maximumAmountOfCredit = $("#maximumAmountOfCredit").val().trim();
            if (!maximumAmountOfCredit) {
                helpMessage("请输入分期额度");
                return;
            }

            var loanDuration = $("#loanDuration").val();
            if (!loanDuration) {
                helpMessage("请输入分期期数");
                return;
            }
            var monthlyInterestTemp = $("#monthlyInterestTemp").val();
            if (!monthlyInterestTemp) {
                helpMessage("请输入客户费率");
                return;
            }

            var loanDuration = $("#loanDuration").val();
            if (!loanDuration) {
                helpMessage("请输入分期期数");
                return;
            }

            $(".myForm").submit();
        })

        function helpMessage(message) {
            $(".helpMsg").text(message).fadeIn(200);
            setTimeout(function () {
                $(".helpMsg").fadeOut(200);
            }, 2000);
        }
    })
</script>